<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>宽度自适应布局</title>
    <style>
        body,div{ margin:0; padding:0;}

        .left{position: absolute;top: 0;left: 0;  width:200px; background:#00f;}
        .right{  width:300px; background:#0f0;position: absolute;top: 0;right: 0; }
        .middle{ background:#333; white-space:nowrap;text-overflow:ellipsis;overflow:hidden }
    </style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">>课程须知1.你需要掌握html+css样式基础知识>课程须知1.你需要掌握html+css样式基础知识>课程须知1.你需要掌握html+css样式基础知识>课程须知1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经老师告诉你能学到什么？1.>课程须知1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经老师告诉你能学到什么？1.>课程须知1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经老师告诉你能学到什么？1.课程须知1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经老师告诉你能学到什么？1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法</div>
<div class="right">300px</div>




</body>
</html>
</body>
</html>